<template>
  <div id="login">
    <div class="container">
      <div>登录账号</div>
      <van-cell-group style="margin-top: 40rem;">
        <van-field v-model="account.phone" label="用户名" placeholder="请输入用户名"/>
      </van-cell-group>
      <van-cell-group style="margin-top: 20rem;">
        <van-field v-model="account.password" type="password" label="密码" placeholder="请输入用户名"/>
      </van-cell-group>
      <van-button type="primary" style="width: 300rem;height: 38rem;margin-top: 40rem;" @click="login">登录</van-button>
    </div>
  </div>
</template>

<script>
import {Notify} from "vant";

export default {
  name: "Login",
  data() {
    return {
      account: {
        phone: "123456",
        password: "123456"
      }
    }
  },
  methods: {
    login() {
      let that = this
      this.$http.post("/base/user/login", this.account)
        .then(function (res) {
          if (res.code === 0) {
            that.$router.push({
              path: '/'
            })
          } else {
            Notify({type: 'warning', message: '登录失败：' + res.msg});
          }
        })
    }
  }
}
</script>

<style scoped>
.container {
  font-size: 26rem;
  font-weight: bold;
  margin: auto;
}

#login {
  display: flex;
  align-items: center;
  flex-flow: column;
  text-align: center;
  width: 100%;
  height: 100%;
}
</style>
